import {
    dom, _query, _append, _queryAll, _addClassName, _removeClassName, _accordion
} from './dom.js'
import { _tree } from './tree.js'
import { renderContent } from './renderContent.js'
import { plainTreeMenu } from '../utils/index.js'
import { _playBar } from './playBar.js'


// let currentMenu = ""
const handleClick = (t, target, root) => {
    console.log(t)
    // currentMenu = t.name
    let { content, isHtml } = renderContent(t)
    let panel = dom.div(content, {
        role: t.name,
        class: 'panel',
        isHtml
    })

    _accordion(panel, `.panel[role=${t.name}]`, target, root)

}
export const _menu = (treeData, config = {}) => {
    let { target, root = document.body } = config
    let render = (t) => {
        return dom.div(t.title, {
            class: 'item'
        }, (e) => {


            handleClick(t, target, root)

        })
    }
    let tree = _tree(treeData, render)
    return dom.div(tree, {
        class: 'menu'
    })

}



export const _fallmenu = (treeData, config = {}) => {
    let { target, root = document.body } = config
    let list = plainTreeMenu(treeData)

    let render = (t) => {
        return dom.div(t.title, {
            class: 'item'
        }, (e) => {
            // force = true
            // timer && clearTimeout(timer)
            handleClick(t, target, root)
        })
    }

    let tree = _tree(treeData, render)


    let playBar = _playBar(list, (t) => {
        handleClick(t, target, root)
    })
    return dom.div([tree, playBar], {
        class: 'fallmenu'
    })

}